<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>复焕集 - 主页（苏海元修改）</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<!-- Font Awesome 图标 -->
    	<link rel="stylesheet" href="fontawesome/css/all.min.css">
		<link rel="stylesheet" href="bootstrap/css/index.css" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/login.css" />
		<link rel="stylesheet" href="css/sign.css" />
		<style>
			.loader {
				width: 50px;
				height: 50px;
				border: 5px solid #3498db;
				border-radius: 50%;
				border-top-color: transparent;
				animation: spin 1s ease-in-out infinite;
				margin: 50px auto;
			}

			@keyframes spin {
				to {
					transform: rotate(360deg);
				}
			}

			.narrow-and-fade-out {
				animation: narrowFadeOut 0.1s ease-in-out forwards;
			}

			@keyframes narrowFadeOut {
				0% {
					height: 100%;
					opacity: 1;
				}

				100% {
					height: 0%;
					opacity: 0;
					display: none;
					/* 可选：动画结束后完全隐藏元素 */
				}
			}

			.narrow-and-fade-back {
				animation: narrowFadeBack 0.1s ease-in-out forwards;
			}

			@keyframes narrowFadeBack {
				0% {
					height: 0%;
					opacity: 0;
				}

				100% {
					height: 100%;
					opacity: 1;
					/* 可选：动画结束后完全隐藏元素 */
				}
			}
		</style>
	</head>
	<body>
		<div class="container-fluid logP hidden text-center" id="logP">
			<div class="login-container hidden" id="log">
				<!-- 登录卡片 -->
				<div class="login-card" id="login-card">
					<!-- 头部区域 -->
					<div class="login-header">
						<h1>欢迎回来</h1>
						<p>请登录您的账户</p>
					</div>

					<!-- 表单区域 -->
					<div class="form-container">
						<!-- 头像显示区域 -->
						<div class="avatar-container" id="avatarContainer">
							<div class="avatar-placeholder">
								👤
							</div>
						</div>

						<!-- 响应消息 -->
						<div id="responseMessage" class="response-message"></div>

						<!-- 登录表单 -->
							<!-- 用户名/邮箱 -->
							<div class="form-group">
								<label for="loginId">用户名</label>
								<div class="input-wrapper">
									<div class="input-icon">@</div>
									<input type="text" id="loginId" name="loginId" class="form-control"
										placeholder="请输入用户名" required value="${cookie.username.value }">
								</div>
							</div>

							<!-- 密码 -->
							<div class="form-group">
								<label for="password">密码</label>
								<div class="input-wrapper">
									<div class="input-icon">🔒</div>
									<input type="password" id="password" name="password" class="form-control"
										placeholder="请输入密码" required value="${cookie.password.value }">
									<div class="password-toggle" id="togglePassword">👁️</div>
								</div>
								<div style="margin-top: 8px;">
									<span id="loginInfo" class="status-text"></span>
								</div>
								<div class="forgot-password">
									<a href="#">忘记密码?</a>
								</div>
							</div>

							<!-- 记住我 -->
							<div class="remember-me">
								<input type="checkbox" id="rememberMe" name="rememberMe">
								<label for="rememberMe">记住我的登录状态</label>
							</div>

							<!-- 登录按钮 -->
							<button class="login-btn" id="loginBtn">
								<span id="loginBtnText">登录账户</span>
							</button>

					</div>
				</div>
			</div>

			<div class="register-container hidden" id="sig">
				<!-- 注册卡片 -->
				<div class="register-card">
					<!-- 头部区域 -->
					<div class="register-header">
						<h1>用户注册</h1>
						<p>创建您的专属账户</p>
					</div>

					<!-- 表单区域 -->
					<div class="form-container">
						<!-- 响应消息 -->
						<div id="responseMessage" class="response-message"></div>

						<!-- 注册表单 -->
						<form id="registerForm">
							<!-- 用户名 -->
							<div class="form-group">
								<label for="username">用户名</label>
								<div class="input-wrapper">
									<div class="input-icon">👤</div>
									<input type="text" id="username" name="username" class="form-control"
										placeholder="请输入用户名" required>
								</div>
								<div style="margin-top: 8px;">
									<span id="statusText" class="status-text">请输入用户名</span>
								</div>
							</div>

							<!-- 密码 -->
							<div class="form-group">
								<label for="password">密码</label>
								<div class="input-wrapper">
									<div class="input-icon">🔒</div>
									<input type="password" id="passwords" name="password" class="form-control"
										placeholder="请输入密码" required>
									<div class="password-toggle" id="togglePasswords">👁️</div>
								</div>
								<div style="margin-top: 8px;">
									<span id="passwordText" class="status-text">请输入密码</span>
								</div>
							</div>

							<!-- 性别 -->
							<div class="form-group">
								<label for="gender">性别</label>
								<div class="input-wrapper">
									<div class="input-icon">👫</div>
									<select id="gender" name="gender" class="form-control" required>
										<option value="空">请选择性别</option>
										<option value="男">男</option>
										<option value="女">女</option>
									</select>
								</div>
								<div style="margin-top: 8px;">
									<span id="genText" class="status-text"></span>
								</div>
							</div>

							<!-- 生日 -->
							<div class="form-group">
								<label for="birthday">生日</label>
								<div class="input-wrapper">
									<div class="input-icon">📅</div>
									<input type="date" id="birthday" name="birthday" class="form-control" required>
								</div>
							</div>

							<!-- 上传头像 -->
							<div class="form-group">
								<label for="headImg">上传头像</label>
								<input type="file" id="headImg" name="headImg" accept="image/*" style="display: none;">
								<button type="button" id="uploadBtn" class="upload-btn">选择图片</button>
							</div>

							<!-- 注册按钮 -->
							<button class="register-btn" id="registerBtn">
								<span id="registerBtnText">注册</span>
							</button>
						</form>

					</div>
				</div>

			</div>
		</div>
		<!-- 导航栏 -->
		<div class="container-fluid fixed-top  navbar-custom" id="top">
			<nav class="navbar navbar-expand-lg" role="navigation">

				<div class="container position-relative">
					<a href="index.jsp" class="navbar-brand navbar-b-custom font-logo">
						<img src="img/headLogo.png" alt="" id="headImage">
					</a>
					<!-- 搜索条 -->
					<form action="search2.jsp" method="get">
						<div class="d-flex position-absolute start-50 translate-middle-x serchBar">
							<input  name="searchName" type="text" class="form-control1 form-control-sm" id="searchBar" />
							<button class="btn btn-primary ms-2 serchBut" id="searchBtn">搜索</button>
						</div>
					</form>
					<!-- 右侧用户信息栏 -->

					<c:choose>
						<c:when test="${not empty sessionScope.logInUser}">
							<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
								<li class="nav-item d-flex align-items-center">
									<img src="${logInUser.headimg}" alt="" class="headimg align-self-center">
								</li>
								<li class="nav-item"><a href="mineInformation.jsp" class="nav-link navbar-a-custom"
										id="">${sessionScope.logInUser.username}</a></li>
								<li class="nav-item"><a href="/poj-java/order.jsp" class="nav-link navbar-a-custom">我的订单</a></li>
								<li class="nav-item"><a href="/poj-java/mychartingRecords.jsp" class="nav-link navbar-a-custom">我的信息</a></li>
								<li class="nav-item"><a href="userLogOut" class="nav-link navbar-a-custom">退出</a></li>
							</ul>
						</c:when>
						<c:otherwise>
							<ul class="navbar-nav mb-2 mb-lg-0 align-items-center">
								<li class="nav-item"><a href="#" class="nav-link navbar-a-custom" id="sign">注册</a></li>
								<li class="nav-item"><a href="#" class="nav-link navbar-a-custom" id="login">登录</a></li>
							</ul>
						</c:otherwise>
					</c:choose>

				</div>
			</nav>
		</div>
		<!-- 中部信息区 -->
		<div class="container-fluid" id="middle">
			<div class="container middle">
				<div class="container ad text-center">
					<!-- <strong class="d-block mb-2" style="font-size: 1.8rem; color: var(--dark-color);">发现身边的二手好物</strong>
                <p class="mb-4" style="font-size: 1.1rem; color: #666;">轻松买卖闲置，循环利用资源，开启绿色生活</p> -->

					<div class="carousel-container">
						<div id="adCarousel" class="carousel slide" data-bs-ride="carousel">
							<!-- 轮播指示器 -->
							<div class="carousel-indicators">
								<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="0" class="active"
									aria-current="true" aria-label="Slide 1"></button>
								<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="1"
									aria-label="Slide 2"></button>
								<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="2"
									aria-label="Slide 3"></button>
								<button type="button" data-bs-target="#adCarousel" data-bs-slide-to="3"
									aria-label="Slide 4"></button>
							</div>

							<!-- 轮播项目 -->
							<div class="carousel-inner">
								<c:forEach items="${sessionScope.PromList}" var="prom" varStatus="status">
									 <div class="carousel-item ${status.first ? 'active' : ''}">
									<img src="${prom.backimg }" class="carousel-img" alt="二手数码产品">
									<div class="carousel-caption">
										<h2 class="carousel-title">${prom.title }</h2>
										<p class="carousel-description">${prom.info }
										</p>
										<button class="carousel-btn" onclick="window.location.href='addCollDo?goodId=${prom.goods.goodid}&userId=${prom.goods.sellerId}'">${prom.buttonText }</button>
									</div>
								</div>
								</c:forEach>
							</div>

							<!-- 上一张/下一张按钮 -->
							<button class="carousel-control-prev" type="button" data-bs-target="#adCarousel"
								data-bs-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="visually-hidden">上一张</span>
							</button>
							<button class="carousel-control-next" type="button" data-bs-target="#adCarousel"
								data-bs-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="visually-hidden">下一张</span>
							</button>
						</div>

						<!-- 平台数据统计 -->
						<div class="stats-bar">
							<div class="stat-item">
								<div class="stat-value">1,250,000+</div>
								<div class="stat-label">活跃用户</div>
							</div>
							<div class="stat-item">
								<div class="stat-value">560,000+</div>
								<div class="stat-label">在售商品</div>
							</div>
							<div class="stat-item">
								<div class="stat-value">98.7%</div>
								<div class="stat-label">用户满意度</div>
							</div>
							<div class="stat-item">
								<div class="stat-value">24h</div>
								<div class="stat-label">极速审核</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="tags container">
				<ul class="row" style="list-style: none;padding-left: 0px;">
					<li class="col-md-2 text-center t-link1">
						<a href="#" class="tags-link"><i class="fa fa-camera"></i>
						 数码电子</a>
					</li>
					<li class="col-md-2 text-center t-link2">
						<i class="fa fa-tv"></i>
						<a href="#" class="tags-link">家用电器</a>
					</li>
					<li class="col-md-2 text-center t-link3">
						<i class="fa fa-shopping-bag"></i>
						<a href="#" class="tags-link">服装鞋包</a>
					</li>
					<li class="col-md-2 text-center t-link4">
						<i class="fa fa-home"></i>
						<a href="#" class="tags-link">家具家居</a>
					</li>
					<li class="col-md-2 text-center t-link5">
						<i class="fa fa-female"></i>
						<a href="#" class="tags-link">母婴儿童</a>
					</li>
					<li class="col-md-2 text-center t-link6">
						<i class="fa fa-bicycle"></i>
						<a href="#" class="tags-link">运动户外</a>
					</li>
				</ul>
				<ul class="row" style="list-style: none;padding-left: 0px;">
					<li class="col-md-2 text-center b-link1">
						<i class="fa fa-tint"></i>
						<a href="#" class="tags-link">美妆个护</a>
					</li>
					<li class="col-md-2 text-center b-link2">
						<i class="fa fa-book"></i>
						<a href="#" class="tags-link">书记音像</a>
					</li>
					<li class="col-md-2 text-center b-link3">
						<i class="fa fa-diamond"></i>
						<a href="#" class="tags-link">珠宝首饰</a>
					</li>
					<li class="col-md-2 text-center b-link4">
						<i class="fa fa-wrench"></i>
						<a href="#" class="tags-link">实用五金</a>
					</li>
					<li class="col-md-2 text-center b-link5">
						<i class="fa fa-gamepad"></i>
						<a href="#" class="tags-link">爱好潮玩</a>
					</li>
					<li class="col-md-2 text-center b-link6">
						<i class="fa fa-shopping-cart"></i>
						<a href="#" class="tags-link">用品生活</a>
					</li>
				</ul>
			</div>
			<div class="container goods" id="show">
				<ul class="row" style="list-style: none;padding-left: 0px;">
					<li class="col-md-4 good-link">
						<a href="goods-info.html" class="d-flex justify-content-between align-items-center">
							<div>
								<img src="img/065441957a3bd280ba6fc94be73c0b05.jpg" alt="" class="goods-img">
							</div>
							<div class="good-info" style="padding: 5px;">
								<p class="g-name">商品名</p>
								<p class="price">商品价格</p>
								<p class="name">商家名称</p>
							</div>
						</a>
					</li>
					<li class="col-md-4 good-link">
						<a href="goods-info.html" class="d-flex justify-content-between align-items-center">
							<div>
								<img src="img/065441957a3bd280ba6fc94be73c0b05.jpg" alt="" class="goods-img">
							</div>
							<div class="good-info" style="padding: 5px;">
								<p class="g-name">商品名</p>
								<p class="price">商品价格</p>
								<p class="name">商家名称</p>
							</div>
						</a>
					</li>
					<li class="col-md-4 good-link">
						<a href="goods-info.html" class="d-flex justify-content-between align-items-center">
							<div>
								<img src="img/065441957a3bd280ba6fc94be73c0b05.jpg" alt="" class="goods-img">
							</div>
							<div class="good-info" style="padding: 5px;">
								<p class="g-name">商品名</p>
								<p class="price">商品价格</p>
								<p class="name">商家名称</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		</div>

		<!-- 底部区 -->
		<footer class="container-fluid bottom p-3 mt-auto" id="footer">
			<div class="font-logo infoLeft mx-auto">
				<strong>复焕集 </strong>旧物也能焕然一新的二手市场。
			</div>
			<div class="container">
				<div class="d-flex flex-wrap justify-content-between">
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>关于我们</strong>
						<li><a href="">公司介绍</a></li>
						<li><a href="">团队介绍</a></li>
						<li><a href="">媒体报道</a></li>
						<li><a href="">加入我们</a></li>
					</ul>
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>帮助中心</strong>
						<li><a href="">新手入门</a></li>
						<li><a href="">交易流程</a></li>
						<li><a href="">常见问题</a></li>
						<li><a href="">安全指南</a></li>
					</ul>
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>规则中心</strong>
						<li><a href="">用户协议</a></li>
						<li><a href="">隐私政策</a></li>
						<li><a href="">交易规则</a></li>
						<li><a href="">社区公约</a></li>
					</ul>
					<ul class="footer-links mb-2 mb-lg-0 flex-grow-1 px-3 text-center">
						<strong>联系我们</strong>
						<li><a href="">客服电话：400-114-514</a></li>
						<li><a href="">商务合作：bd@fuhuanji.com</a></li>
						<li><a href="">举报反馈：report@fuhuanji.com</a></li>
					</ul>
				</div>
			</div>
			<div class="copyright">
				© 2023 复焕集 All Rights Reserved. 蜀ICP备12345678号
			</div>
		</footer>
	</body>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/login.js"></script>
	<script src="js/sign.js"></script>
	<script src="js/index.js"></script>
	<script src="js/index-findBooks.js"></script>
	<script src="js/searchBarFindGoods.js"></script>
	<script>
	$('.tags-link').click(function(e) {
		e.preventDefault()
	});
		const loginForm = document.getElementById('loginForm');
		var rebtn = $('#registerBtn')
		console.log(rebtn)
		rebtn.click(function() {
			return false;
		})
	</script>
</html>